const Star = Vue.defineComponent({
	props: {
		value: Number
	},
	data() {
		return {
			hoverIdx: this.value || 0,
			rate: this.value || 0
		}
	},
	watch: {
		rate() {
			this.$emit('update:value', this.rate)
		}
	},
	template: `
	<ul class="star">
		<li v-for='i in  5' @mouseenter="hoverIdx=i" @mouseleave="hoverIdx=rate" @click="rate=i">
			<img v-if="i<=hoverIdx" src="images/star.png" alt="">
			<img v-else src="images/star-off.png" alt="">
		</li>
		<li>{{rate}}分</li>
	</ul>
	`
})
